<template>
  <div>
    <!-- 搜索 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-weight:700">高级搜索</span>
      </div>
      <el-form ref="formData" label-width="80px" :model="form">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="编号">
              <el-input v-model.trim="form.id" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户编号">
              <el-input v-model.trim="form.userId" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="减员姓名">
              <el-input v-model.trim="form.userName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态">
              <!--  <el-select v-model="form.status" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> -->
              <el-select v-model="form.status" placeholder="请选择" style="width:100%" clearable>
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="类型">
              <el-select v-model="form.type" placeholder="请选择" style="width:100%" clearable>
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建日期">
              <div class="date_box">
                <el-date-picker
                  v-model="form.createTime"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                />
                <!-- <i class="el-icon-date data_icon" /> -->
              </div>
            </el-form-item>
          </el-col>
          <div style="float:right; padding-right:15px">
            <el-button style="width:100px" @click="resetList">重置</el-button>
            <el-button style="width:100px" type="primary" @click="search">搜索</el-button>
          </div>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <!-- tab栏 -->
      <el-tabs v-model="activeName" class="tab" @tab-click="handleClick">
        <el-tab-pane v-loading="isloading" :label="`全部（${total}）`" name="first">
          <el-table
            ref="registTable"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              prop="id"
              label="编号"
              width="150"
            />
            <el-table-column
              prop="type"
              label="类型"
              width="150"
            >
              <template #default="{row}">
                <span v-if="row.type==='0'">线索工单</span>
                <span v-if="row.type==='1'">商机工单</span>
                <span v-if="row.type==='2'">商户工单</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="userId"
              label="用户编号"
              width="150"
            />
            <el-table-column
              prop="userName"
              label="减员姓名"
              width="150"
            />
            <el-table-column
              prop="createTime"
              label="创建时间"
              width="200"
            />
            <el-table-column
              prop="status"
              label="状态"
              width="150"
            >
              <template #default="{row}">
                <span v-if="row.status==='0'" class="span" />
                <span v-if="row.status==='1'" class="span1" />
                <span v-if="row.status==='2'" class="span2" />
                <span v-if="row.status==='0'">待办</span>
                <span v-if="row.status==='1'">已延期</span>
                <span v-if="row.status==='2'">已完成</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="150"
            >
              <template #default="{row}">
                <el-button v-if="row.status!=='2'" @click="process('check',row)">处理</el-button>
                <el-button v-else @click="detail('detail',row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <span>已选{{ selectNum.length || 0 }}项</span>
          <!-- 分页 -->
          <el-pagination
            background
            :current-page="form.pageNum"
            :page-sizes="[3, 6, 12, 14]"
            :page-size="form.pageSize"
            layout="total, prev, pager, next,sizes, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <!--  <el-pagination
            background
            :current-page="form.pageNum"
            :page-sizes="[3, 6, 12, 14]"
            :page-size="form.pageSize"
            layout="total,  prev, pager, next,sizes, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          /> -->
        </el-tab-pane>
        <el-tab-pane :label="`待办（${arr.length}） `" name="second">
          <el-table
            ref="registTable1"
            :data="arr"
            style="width: 100%"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              prop="id"
              label="编号"
              width="150"
            />
            <el-table-column
              prop="type"
              label="类型"
              width="150"
            >
              <template #default="{row}">
                <span v-if="row.type==='0'">线索工单</span>
                <span v-if="row.type==='1'">商机工单</span>
                <span v-if="row.type==='2'">商户工单</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="userId"
              label="用户编号"
              width="150"
            />
            <el-table-column
              prop="userName"
              label="减员姓名"
              width="150"
            />
            <el-table-column
              prop="createTime"
              label="创建时间"
              width="200"
            />
            <el-table-column
              prop="status"
              label="状态"
              width="150"
            >
              <template #default="{row}">
                <span v-if="row.status==='0'" class="span" />
                <span v-if="row.status==='1'" class="span1" />
                <span v-if="row.status==='2'" class="span2" />
                <span v-if="row.status==='0'">待办</span>
                <span v-if="row.status==='1'">已延期</span>
                <span v-if="row.status==='2'">已完成</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="150"
            >
              <template #default="{row}">
                <el-button v-if="row.status!=='2'" @click="process('check',row)">处理</el-button>
                <el-button v-else @click="detail('detail',row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <span>已选{{ selectNum1.length || 0 }}项</span>
          <el-pagination
            background
            :current-page="form.pageNum"
            :page-sizes="[3, 6, 12, 14]"
            :page-size="form.pageSize"
            layout="total,  prev, pager, next,sizes, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-tab-pane>
        <el-tab-pane :label="`已延期（${arr1.length}）`" name="third">
          <el-table
            ref="registTable2"
            :data="arr1"
            style="width: 100%"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              prop="id"
              label="编号"
              width="150"
            />
            <el-table-column
              prop="type"
              label="类型"
              width="150"
            >
              <template #default="{row}">
                <span v-if="row.type==='0'">线索工单</span>
                <span v-if="row.type==='1'">商机工单</span>
                <span v-if="row.type==='2'">商户工单</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="userId"
              label="用户编号"
              width="150"
            />
            <el-table-column
              prop="userName"
              label="减员姓名"
              width="150"
            />
            <el-table-column
              prop="createTime"
              label="创建时间"
              width="200"
            />
            <el-table-column
              prop="status"
              label="状态"
              width="150"
            >
              <template #default="{row}">
                <span v-if="row.status==='0'" class="span" />
                <span v-if="row.status==='1'" class="span1" />
                <span v-if="row.status==='2'" class="span2" />
                <span v-if="row.status==='0'">待办</span>
                <span v-if="row.status==='1'">已延期</span>
                <span v-if="row.status==='2'">已完成</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="150"
            >
              <template #default="{row}">
                <el-button v-if="row.status!=='2'" @click="process('check',row)">处理</el-button>
                <el-button v-else @click="detail('detail',row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <span>已选{{ selectNum2.length || 0 }}项</span>
          <el-pagination
            background
            :current-page="form.pageNum"
            :page-sizes="[3, 6, 12, 14]"
            :page-size="form.pageSize"
            layout="total,  prev, pager, next,sizes, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-tab-pane>
        <el-tab-pane :label="`已完成（${arr2.length}）`" name="fourth">
          <el-table
            ref="registTable3"
            :data="arr2"
            style="width: 100%"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              prop="id"
              label="编号"
              width="150"
            />
            <el-table-column
              prop="type"
              label="类型"
              width="150"
            >
              <template #default="{row}">
                <span v-if="row.type==='0'">线索工单</span>
                <span v-if="row.type==='1'">商机工单</span>
                <span v-if="row.type==='2'">商户工单</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="userId"
              label="用户编号"
              width="150"
            />
            <el-table-column
              prop="userName"
              label="减员姓名"
              width="150"
            />
            <el-table-column
              prop="createTime"
              label="创建时间"
              width="200"
            />
            <el-table-column
              prop="status"
              label="状态"
              width="150"
            >
              <template #default="{row}">
                <span v-if="row.status==='0'" class="span" />
                <span v-if="row.status==='1'" class="span1" />
                <span v-if="row.status==='2'" class="span2" />
                <span v-if="row.status==='0'">待办</span>
                <span v-if="row.status==='1'">已延期</span>
                <span v-if="row.status==='2'">已完成</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="150"
            >
              <template #default="{row}">
                <el-button v-if="row.status!=='2'" @click="process('check',row)">处理</el-button>
                <el-button v-else @click="detail('detail',row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <span>已选{{ selectNum3.length || 0 }}项</span>
          <el-pagination
            background
            :current-page="form.pageNum"
            :page-sizes="[3, 6, 12, 14]"
            :page-size="form.pageSize"
            layout="total,  prev, pager, next,sizes, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <editAct ref="editDia" :open-visible.sync="openVisible" />
  </div>
</template>
<script>
import editAct from './components/editAct.vue'
import { getAllocationListApi } from '@/api/allocation'
export default ({
  components: {
    editAct
  },
  data() {
    return {
      form: {
        pageNum: 1,
        pageSize: 5,
        id: '', // 编号
        userId: '', // 用户编号
        userName: '',
        type: '',
        status: '',
        createTime: '' // 日期
      },
      activeName: 'first', // tab栏
      tableData: [], // 表格数据
      total: 0,
      openVisible: false, // 弹窗开关
      isloading: false,
      typeList: [ // 类型
        { label: '待办', value: '0' },
        { label: '已延期', value: '1' },
        { label: '已完成', value: '2' }
      ],
      statusList: [ // 类型
        { label: '线索工单', value: '0' },
        { label: '商机工单', value: '1' },
        { label: '商户工单', value: '2' }
      ],
      // 分栏
      arr: [],
      arr1: [],
      arr2: [],
      selectNum: [], // 选中数组
      selectNum1: [], // 选中数组
      selectNum2: [], // 选中数组
      selectNum3: [], // 选中数组
      departmentList: [] // 部门列表
    }
  },
  created() {
    this.getAllocationList()
  },
  mounted() {
    // 多选框选中数
    this.selectNum = this.$refs.registTable.selection
    this.selectNum1 = this.$refs.registTable1.selection
    this.selectNum2 = this.$refs.registTable2.selection
    this.selectNum3 = this.$refs.registTable3.selection
  },
  methods: {
    // 获取列表
    async getAllocationList() {
      const { data } = await getAllocationListApi(this.form)
      this.total = data.total
      this.tableData = data.records
      console.log(this.tableData)
      // console.log(this.departmentList)
      // tab栏数据
      this.second(this.tableData)
      this.third(this.tableData)
      this.fourth(this.tableData)
    },
    // 搜索
    search() {
      console.log(typeof (this.form.userId))
      console.log(this.form.userId)
      this.getAllocationList(this.form)
    },
    // 重置表单
    resetList() {
      this.form = {
        pageNum: 1,
        pageSize: 10,
        id: '', // 编号
        userId: '', // 用户编号
        userName: '',
        type: '',
        status: '',
        createTime: '' // 日期
      }
      this.getAllocationList(this.form)
    },
    // 分页
    handleSizeChange(val) {
      // console.log(val)
      this.form.pageSize = val
      this.getAllocationList(this.form)
    },
    handleCurrentChange(val) {
      // console.log(val)
      this.form.pageNum = val
      this.getAllocationList(this.form)
    },
    // 打开弹窗
    process(val, row) {
      this.openVisible = true
      // console.log(val)
      // console.log(row)
      this.$refs.editDia.dataList(val, row)
      // 部门数据
      this.$refs.editDia.getDptList()
    },
    detail(val, row) {
      this.openVisible = true
      // console.log(val)
      this.$refs.editDia.dataList(val, row)
    },
    // tab栏数据
    second(tableData) {
      const arr = []
      tableData.map(item => {
        if (item.type !== '1') {
          return
        } else {
          arr.push(item)
        }
        return arr
      })
      // console.log(arr)
      this.arr = arr
    },
    third(tableData) {
      const arr1 = []
      tableData.map(item => {
        if (item.type !== '0') {
          return
        } else {
          arr1.push(item)
        }
        return arr1
      })
      // console.log(arr1)
      this.arr1 = arr1
    },
    fourth(tableData) {
      const arr2 = []
      this.tableData.map(item => {
        if (item.type !== '2') {
          return
        } else {
          arr2.push(item)
        }
        return arr2
      })
      // console.log(arr2)
      this.arr2 = arr2
    },
    // tab栏切换（通过tab组件切换）观赏不好
    handleClick(tab) {
      /* console.log(tab._props.name)
      if (tab._props.name === 'second') {
        const arr = []
        this.tableData.map(item => {
          if (item.type !== '1') {
            return
          } else {
            arr.push(item)
          }
          return arr
        })
        console.log(arr)
        this.arr = arr
      }
      if (tab._props.name === 'third') {
        const arr1 = []
        this.tableData.map(item => {
          if (item.type !== '0') {
            return
          } else {
            arr1.push(item)
          }
          return arr1
        })
        console.log(arr1)
        this.arr1 = arr1
      }
      if (tab._props.name === 'fourth') {
        const arr2 = []
        this.tableData.map(item => {
          if (item.type !== '2') {
            return
          } else {
            arr2.push(item)
          }
          return arr2
        })
        console.log(arr2)
        this.arr2 = arr2
      }*/
    }
  }
})
</script>
<style scoped lang='scss'>
// tab栏
::v-deep .el-tabs__item {
  width: 138px;
  text-align: center;
  padding: 0;
}
::v-deep .el-tabs__active-bar {
  width:120px !important;
}

// 表格
// 表头颜色
::v-deep .el-table tr {
    color: #5a5a5a;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #1890ff;
}
::v-deep  .el-pagination.is-background .el-pager li {
    border-radius: 6px;
    border: 1px solid #e7e7e7;
    width: 35px;
    height: 35px;
    line-height: 35px;
}
// 表格选中几项
.el-table {
    margin-bottom: 40px;
    font-size: 14px;
}
// 状态颜色
.span{
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: blue;
  border-radius: 5px;
  margin-right: 6px;
  margin-bottom: 3px;
  }
  .span1{
    display: inline-block;
  width: 5px;
  height: 5px;
  background-color: red;
  border-radius: 5px;
  margin-right: 6px;
  margin-bottom: 3px;
  }
  .span2{
    display: inline-block;
  width: 5px;
  height: 5px;
  background-color: green;
  border-radius: 5px;
  margin-right: 6px;
  margin-bottom: 3px;
  }
// 操作按钮设置
.el-table .el-button{
border: none;
color: #1890ff;
text-align: left;
padding: 0;
}

// 分页设置
::v-deep .el-pagination {
    // text-align: right;
    width: 800px;
    float: right;
}
// 左右切换
 ::v-deep .el-pagination.is-background .btn-next {
    padding: 0;
    border-radius: 6px;
    border: 1px solid #e7e7e7;
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 16px
}
// 切换页
::v-deep  .el-pagination.is-background .btn-prev{
    padding: 0;
    padding: 0;
    border-radius: 6px;
    border: 1px solid #e7e7e7;
    width: 35px;
    height: 35px;
    line-height: 35px;
}
::v-deep .el-pagination.is-background .el-pager li {
    font-size: 16px;
    font-weight: 400;
}
// 页容量
::v-deep .el-pagination .el-select .el-input .el-input__inner {
    border-radius: 6px;
    height: 35px;
    font-size: 16px;
    color: #929292;
}
// 页大小
::v-deep .el-pagination__editor.el-input .el-input__inner {
    height: 35px;

}
// 总数量
::v-deep .el-pagination span:not([class*=suffix]), .el-pagination button {
    font-size: 16px;
    color: #929292;
}

// 日期选择器
.el-input--prefix .el-input__inner {
    padding-left: 28px;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 100%;
}
// 日期修改图片位置
/*   ::v-deep .el-input__prefix .el-input__icon {
    // display: none;
  } */
 /*  .date_box {
    position: relative;
    width: fit-content;
    .data_icon {
      position: absolute;
      top: 50%;
      right: 17px;
      z-index: 9;
      color: #c0c4cc;
      font-size: 14px;
      transform: translateY(-50%);
    }
 /*    ::v-deep .el-range__close-icon {
      position: absolute;
      right: 34px;
      top: 54%;
      transform: translateY(-50%);
    } */
  // } */
 /*  ::v-deep .date_box[data-v-647284c6]{
    width: 100%;
  } */
</style>
